import {
  Layout, Icon, Input, Avatar, Button, Tooltip, Dropdown, Menu,
} from 'antd'
import { withRouter } from 'next/router'
import Link from 'next/link'
import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import CenterContainer from './CenterContainer'
import { logout } from '../store/store'
import HeaderLayout from './HeaderLayout';
import ContentLayout from './Content';
import FooterLayout from './FooterLayout';
const { Header, Content, Footer } = Layout

const AppLayout = ({ children, router }) => {
  const { query: { query = '' } = {} } = router
  const user = useSelector((store) => store.user)
  const dispatch = useDispatch()

  const [search, setSearch] = useState(query)
  const handleSearchChange = (e) => {
    setSearch(e.target.value)
  }

  const handleOnSearch = () => {
    router.push(`/search?query=${search}`)
  }

  const handleLogout = () => {
    dispatch(logout())
  }

  const UserDropDown = (
    <Menu>
      <Menu.Item>
        <Button onClick={handleLogout} type="link">登出</Button>
      </Menu.Item>
    </Menu>
  )

  return (
    <Layout>
     <HeaderLayout/>
     <ContentLayout/>
     <FooterLayout/>
      <style jsx global>
        {`
          #__next {
            height: 100%;
          }

          .ant-layout {
            min-height: 100%;
          }

          .ant-layout-header {
            padding-left: 0;
            padding-right: 0;
            background: #fff;
            height: auto;
            margin-bottom:20px;
          }

          .ant-layout-content {
            background: #fff;
          }
        `}
      </style>
    </Layout>
  )
}

export default withRouter(AppLayout)
// import {
//     Layout, Icon, Input, Avatar, Button, Tooltip, Dropdown, Menu,
// } from 'antd'
// import {withRouter} from 'next/router'
// import Link from 'next/link'
// import {useState} from 'react'
// import {useSelector, useDispatch} from 'react-redux'
// import CenterContainer from './CenterContainer'
// import {logout} from '../store/store'
// import HeaderLayout from './Header';
// import ContentLayout from './Content';
// import FooterLayout from './Footer';
//
// const {Header, Content, Footer} = Layout
//
// const AppLayout = ({children, router}) => {
//     const {query: {query = ''} = {}} = router
//     const user = useSelector((store) => store.user)
//     const dispatch = useDispatch()
//
//     const [search, setSearch] = useState(query)
//     const handleSearchChange = (e) => {
//         setSearch(e.target.value)
//     }
//
//     const handleOnSearch = () => {
//         router.push(`/search?query=${search}`)
//     }
//
//     const handleLogout = () => {
//         dispatch(logout())
//     }
//
//
//     return (
//         <Layout className="layout">
//             <HeaderLayout/>
//             <ContentLayout/>
//             <FooterLayout/>
//         </Layout>
//     )
// }
//
// export default withRouter(AppLayout)
